<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_DOM事件监听</title>
</head>
<body>
<button onclick="alert('最近降温')">弹出警告框</button>
<button id="btn">我是按钮</button>
<h4>震惊:居然发生了这种事...</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cumque debitis distinctio dolor dolorum ipsa,
        iste laboriosam magni molestiae obcaecati officia placeat quam qui quibusdam sit tempora tenetur totam
        voluptates.
    </div>
    <div>Aliquid animi distinctio dolorem ipsam libero nemo neque nobis ratione repudiandae! Blanditiis excepturi in
        inventore placeat quia tenetur? Blanditiis enim error iure suscipit veritatis vero voluptate voluptatem.
        Laboriosam, quos sint?
    </div>
    <div>A accusantium ad, aspernatur blanditiis consequuntur cumque cupiditate dicta dolor dolore, dolorum eos error
        fugiat fugit illo inventore ipsa maxime minus molestias necessitatibus quaerat quidem, repudiandae sed ullam ut
        vero.
    </div>
    <div>Deserunt distinctio eligendi illo incidunt ipsam maxime minus quo reiciendis tempore! Ab atque cum deleniti
        error exercitationem fugit hic minus, nam officia perferendis placeat porro repellat sequi tempora veniam
        voluptas.
    </div>
    <div>At distinctio eaque et excepturi ipsam nulla quia quis reiciendis voluptate? Amet beatae debitis earum maxime
        necessitatibus repudiandae rerum. Ab assumenda ea illum laboriosam odit quasi rem repellendus sunt voluptas.
    </div>
    <div>Deleniti dolore harum nulla perspiciatis quasi repudiandae tenetur? Accusamus blanditiis, consectetur cum
        distinctio doloribus earum, eligendi esse eveniet fugiat, ipsa laborum numquam obcaecati odio omnis possimus
        quibusdam ratione recusandae ullam?
    </div>
    <div>Ad aliquam asperiores beatae deleniti dolor, dolorem doloremque doloribus dolorum ducimus earum eius eligendi
        fugiat, hic id illo iure laboriosam libero nostrum reiciendis reprehenderit sapiente sit ut velit vero
        voluptates?
    </div>
    <div>Ad, asperiores at consectetur est et eum fugit incidunt iure magnam nisi, nulla praesentium provident sed sit,
        tempora vitae voluptate? Dolores laboriosam, perspiciatis possimus quaerat quidem quisquam quod rem veniam!
    </div>
    <div>Accusamus assumenda consequatur corporis distinctio ducimus eius enim harum iste itaque libero molestias
        mollitia quas qui, quibusdam quod reprehenderit saepe sint sit temporibus vel? Deserunt laboriosam magni modi
        officiis voluptates.
    </div>
    <div>Explicabo fugit, incidunt necessitatibus pariatur placeat repudiandae suscipit voluptate. A aperiam commodi
        delectus itaque provident qui quod voluptate. Aliquam animi dolore facilis repudiandae? Aliquam laborum
        molestiae nobis quisquam reprehenderit, tempora?
    </div>
    <div>Adipisci alias aut autem cum dicta dolorum fugit id illo impedit in, laudantium nostrum officia perspiciatis
        provident qui quod reiciendis similique sunt veniam vero. Amet aperiam autem consequatur omnis similique.
    </div>
    <div>Ad alias aliquam consectetur, corporis doloremque doloribus eaque enim fuga, hic iusto mollitia nesciunt nulla
        numquam optio pariatur praesentium repudiandae. Ad blanditiis cupiditate expedita facilis, illum magnam odio ut
        veniam.
    </div>
    <div>Aliquam animi commodi, culpa cumque dolore dolorem doloribus ea esse et, fugiat hic, id in ipsa itaque libero
        modi molestiae obcaecati placeat quibusdam repellat rerum saepe sequi tempora temporibus voluptatum!
    </div>
    <div>Ad aliquam aspernatur aut consequatur, cum cumque debitis deserunt doloremque eligendi esse et, eum, inventore
        ipsa laboriosam laborum magnam modi odit omnis perspiciatis quae qui sed vel voluptatum! Deleniti, sed.
    </div>
    <div>Accusantium, aliquid at dolores est excepturi exercitationem expedita id minima modi molestias nemo, non nulla
        quas quibusdam quidem, quisquam quos saepe similique ut velit. Aliquid id ipsa nam quam soluta?
    </div>
    <div>Aliquam debitis ea esse expedita necessitatibus nulla qui sint velit veniam. Accusantium consequatur
        doloremque, ex expedita facere incidunt magni possimus rerum! Est ex hic ipsa possimus quae quia quidem
        sapiente?
    </div>
    <div>Commodi numquam totam voluptate? Ad error et eum molestiae porro quis voluptas. Animi, corporis cum dolorum,
        est eveniet impedit, ipsam nihil nulla quibusdam saepe ut vitae! Assumenda consequuntur expedita nisi.
    </div>
    <div>Accusamus at consequatur cumque dolorem earum error et fuga fugit ipsa, ipsam itaque maiores molestias nemo
        nihil optio perferendis provident quae quam quas repellat rerum saepe sunt totam voluptas voluptates!
    </div>
    <div>Doloribus excepturi minima nostrum ratione? A, amet assumenda cum doloremque dolores facilis incidunt iure
        iusto magni molestias nulla obcaecati odio omnis quam quas, repellat repellendus sapiente soluta, tempora ut
        voluptatum!
    </div>
    <div>Aut blanditiis doloribus eum illum, minima odit rerum voluptatibus. Ab aspernatur deserunt dolores ducimus
        error fuga nobis nostrum quo sit? Ad aliquid doloremque dolores impedit iure molestias nisi quia, quod.
    </div>
    <div>Aliquid architecto earum laborum nesciunt qui quisquam sapiente sunt voluptatibus! Fuga, nihil odio?
        Consequatur eius laborum minima minus nam quibusdam rem repellendus repudiandae. Atque est excepturi hic. Eaque,
        nesciunt quia!
    </div>
    <div>Blanditiis eius fuga fugit impedit iste nobis praesentium quia quod totam unde! Consequatur delectus doloremque
        eligendi laboriosam, libero tempora. Error expedita, facilis illo maiores nemo odio odit quos sed suscipit?
    </div>
    <div>Commodi, dolor ea est eveniet expedita iure, maiores nemo nihil qui quisquam tempore ullam veniam? Aut, eius,
        rerum! Ad alias, animi aperiam commodi corporis expedita ipsam nobis officia omnis saepe.
    </div>
    <div>Accusantium adipisci, at, consequatur cum doloribus ducimus esse expedita laboriosam nisi placeat temporibus
        totam! Aspernatur autem dignissimos doloribus, error, hic in inventore non officia optio pariatur praesentium
        quia quidem, sed?
    </div>
    <div>A atque cum et exercitationem, quas repudiandae sint. A ab animi fugiat incidunt, labore modi, omnis quae quas
        temporibus veritatis voluptatem voluptatum? Consequatur corporis labore nostrum odit quae quis tempore.
    </div>
    <div>Adipisci, alias animi consectetur consequatur illo in minus odio quisquam temporibus vero? Architecto aut
        maxime modi officia quae quam quasi velit. Accusantium assumenda, dignissimos dolores laboriosam magnam nam quos
        rerum?
    </div>
    <div>A commodi est optio quam reiciendis repudiandae tempora voluptate voluptatibus. Aperiam atque consequatur
        debitis distinctio doloremque, enim fuga fugiat fugit iste maiores reprehenderit voluptates? Atque deleniti
        eaque illum quas sed?
    </div>
    <div>Omnis, quasi ullam. Accusamus aperiam consequuntur debitis distinctio labore libero nisi, odio quaerat sequi
        sit ullam velit vitae. Ad doloremque, esse fuga in nihil odit optio pariatur quisquam? Doloremque, hic.
    </div>
    <div>Aperiam beatae culpa facilis hic nobis officiis quibusdam repellat temporibus voluptate! Architecto et quam
        quia? Asperiores commodi eaque maiores optio quae rerum veniam voluptate! Ipsam iusto magnam nulla quae vel?
    </div>
    <div>Aliquam animi asperiores cum nulla numquam officiis pariatur repellendus ut. Asperiores, deserunt id illo
        incidunt iste maiores maxime nemo porro possimus quae quo rem repellendus sed totam veritatis? Eaque,
        exercitationem?
    </div>
    <div>Ab accusamus alias, aliquid assumenda culpa delectus, dolore dolorem excepturi hic iste itaque, minima modi
        natus odio officiis pariatur quaerat rerum tempora tempore vero? Quia quisquam sint unde vel vitae.
    </div>
    <div>Accusantium aperiam atque aut cum eaque earum enim et iste itaque provident, quaerat repudiandae saepe
        sapiente, tenetur voluptas voluptate voluptates. A adipisci aspernatur commodi, doloribus incidunt modi nulla
        quas velit!
    </div>
    <div>Ab, accusantium, adipisci aliquam atque cupiditate dignissimos doloremque doloribus eaque error ex explicabo
        fuga id ipsam laborum laudantium magnam magni, nostrum nulla praesentium quisquam quo repudiandae sed sint
        veritatis voluptatum.
    </div>
    <div>Alias aliquam excepturi exercitationem explicabo, facere fugit illum laudantium mollitia, necessitatibus quidem
        quod soluta ut veritatis! Architecto at error facilis fugiat non, perferendis provident quasi quisquam quod
        reiciendis tempora velit!
    </div>
    <div>Animi asperiores at blanditiis culpa dignissimos in inventore iusto laboriosam mollitia, numquam omnis quod
        repudiandae sequi tenetur vel vero voluptatibus? Accusantium assumenda corporis doloremque, illo ipsum nostrum
        porro vero voluptas!
    </div>
    <div>Consequatur earum minus nostrum quasi reprehenderit! Deleniti dolorem enim excepturi fugit libero, nobis porro
        recusandae temporibus vero! Aliquam, dignissimos, inventore? Accusantium aliquam beatae debitis incidunt iusto
        minus quasi temporibus unde!
    </div>
    <div>Asperiores atque cumque delectus ducimus et eum fugit id, impedit, ipsa mollitia nemo, possimus sint veniam!
        Assumenda consequuntur ducimus eveniet illo iusto quaerat quia rem tempore vitae voluptatem. Accusantium, quam!
    </div>
    <div>Adipisci asperiores dolor dolores maiores necessitatibus nihil repellendus veritatis voluptatibus. Consequatur
        distinctio dolore dolores iste labore nisi placeat quo recusandae sed voluptatem. Ab accusantium cumque,
        laboriosam officia qui ratione totam.
    </div>
    <div>Adipisci atque blanditiis commodi corporis cumque dignissimos distinctio doloremque ducimus enim eos eum fuga
        fugiat laborum maxime molestiae nemo, nihil nostrum, officiis pariatur possimus qui repellendus saepe unde
        veniam veritatis?
    </div>
    <div>Commodi delectus deserunt dignissimos dolorum ex explicabo iure, laborum, nam nisi pariatur praesentium saepe
        sequi! Aperiam atque ex exercitationem fugiat harum, hic libero maxime neque officiis quis reiciendis sequi
        veritatis.
    </div>
    <div>Aliquid, dicta eius eos ex illum ipsa itaque laboriosam laborum libero magnam molestias non pariatur reiciendis
        rem saepe unde, vel, voluptatibus! Blanditiis consectetur dolorem omnis vel? Dolor fuga quis voluptatibus?
    </div>
    <div>Asperiores blanditiis corporis, deserunt dicta provident quasi quia quos veritatis. Ab aliquid consequatur
        dignissimos eum illum molestias quidem ut. Ab commodi illo ipsum laborum molestiae nihil pariatur quis quod
        sapiente.
    </div>
    <div>A aliquid asperiores atque autem consequatur debitis dignissimos distinctio ea explicabo, fugit nam nihil nobis
        possimus quia sapiente sint sit velit? Aperiam consectetur dicta, dolor incidunt itaque labore nam vel!
    </div>
    <div>Accusantium at fugit impedit iste minus non odit provident quo saepe, totam? Deserunt, fugit id incidunt
        laborum nisi nostrum officia, provident quas reiciendis velit, voluptatibus voluptatum. Quam saepe sint
        veritatis?
    </div>
    <div>Distinctio enim ipsa modi molestias perspiciatis provident quaerat repudiandae veniam, veritatis vitae. Aliquam
        aspernatur cumque cupiditate dolores eaque necessitatibus neque nihil porro possimus quaerat, sed similique sit
        tempore, unde voluptatibus.
    </div>
    <div>Aliquam blanditiis consequatur cupiditate debitis dolores est eum ex excepturi, explicabo fugit impedit labore
        laboriosam modi molestias natus neque nisi perspiciatis possimus quisquam rerum sapiente tempora totam, velit
        voluptas voluptates.
    </div>
    <div>A accusamus consectetur consequatur cupiditate dolorum enim id ipsa ipsam laudantium magnam minus, modi
        praesentium repellendus tempore veniam voluptas voluptatem? Nesciunt, perspiciatis, quidem. Inventore ipsam
        laudantium modi reprehenderit sequi suscipit.
    </div>
    <div>Dicta ea error itaque recusandae voluptates. Aut culpa deleniti dignissimos ducimus earum harum illo ipsum
        iusto maiores modi mollitia neque pariatur, praesentium provident quibusdam quis, quisquam ut vel. Illo, ut.
    </div>
    <div>Amet, asperiores assumenda at cupiditate deserunt dicta dolore error explicabo fuga hic itaque labore maiores
        nemo neque officia, porro quibusdam quisquam rerum, sint sit sunt veniam voluptatum. Reprehenderit, sed soluta!
    </div>
    <div>Adipisci, dolorum facere harum illum incidunt laborum quia quis sunt temporibus totam, veritatis vitae
        voluptatum? Aliquam amet blanditiis dolores doloribus exercitationem laborum molestiae molestias perferendis
        provident, quasi rerum, soluta voluptate.
    </div>
    <div>Ex molestias, sit? Ad assumenda atque commodi debitis deleniti dolor doloremque ducimus expedita in labore,
        maiores minima minus natus numquam quidem soluta velit? Beatae culpa dignissimos eos esse sequi unde!
    </div>
    <div>Ducimus laudantium maiores quia sint sit tenetur ut. Ab animi aperiam consectetur dolorem ea earum, est fugiat,
        in iusto laboriosam minima numquam praesentium quis similique sint veritatis vero voluptate voluptatem.
    </div>
    <div>Accusantium aliquid at commodi debitis delectus deserunt distinctio fugiat harum hic illo illum incidunt
        laudantium libero nemo quaerat, qui sunt temporibus tenetur. At dignissimos eum excepturi ipsum, laudantium
        velit vitae.
    </div>
    <div>Accusamus blanditiis dignissimos dolorum eius enim et ipsam iste non quibusdam velit? Accusantium aperiam
        deleniti dicta ducimus, eos explicabo, incidunt libero nobis repellendus sunt temporibus velit? Facere
        inventore, placeat. Officiis?
    </div>
    <div>Adipisci alias corporis dicta dignissimos, fuga illo recusandae sint voluptatibus. Alias, aliquam est fugiat,
        fugit ipsa ipsum iure laudantium modi necessitatibus obcaecati perspiciatis quis sit vero voluptatem voluptates?
        Debitis, rerum!
    </div>
    <div>Debitis doloribus ipsa natus praesentium quos tempore voluptatibus? Accusantium aspernatur corporis cupiditate
        doloribus eius facilis fugit laborum magni molestiae nam optio quia rem repellat, reprehenderit similique
        suscipit tenetur unde? Iure?
    </div>
    <div>Corporis cupiditate distinctio, minima mollitia nesciunt non, possimus quas qui quo repellat, rerum sint.
        Accusantium aliquam animi dolore dolorum ducimus eveniet necessitatibus nihil, nulla numquam praesentium
        quisquam sunt, tempore voluptatem!
    </div>
    <div>Adipisci, animi consequatur cumque earum esse ipsa laboriosam nesciunt vel vitae voluptatum? Ab at dolorem eos
        iste laudantium officia, quis reprehenderit saepe velit voluptas. Accusantium error hic itaque maiores tenetur.
    </div>
    <div>Ab aut distinctio dolorem, eius eos facilis fuga nulla quia suscipit voluptate! Ab consectetur, cum doloremque
        dolores earum, excepturi fugit minima molestias obcaecati omnis sunt vel voluptas voluptates? Eaque, est?
    </div>
    <div>Blanditiis corporis distinctio doloremque explicabo inventore itaque laudantium mollitia odio sed. Doloremque
        eum magnam natus nulla placeat quia repellendus. Illo ipsum iure magni mollitia numquam quae quia reiciendis
        vero voluptate?
    </div>
</div>
<script>
    let buttonE = document.getElementById('btn');
    /* 鼠标点击事件 */
    buttonE.addEventListener('click',function (){
        alert('哈哈哈,点我了吧~');
    })

    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('标题被查看了!');
    })

    window.addEventListener('resize' ,function (){
        alert('窗口大小被resize改动了');
    })
    window.addEventListener('scroll' ,function (){
        alert('窗口被滚动了');
    })
</script>
</body>
</html>